<template>
	<view class="order-page" v-if="orderDetail">
		
		<view  class="orderStatus c-flex c-item-center jc-center c-flex-col">
			<view class="c-flex c-item-center">
				<image :style="'width:'+orderStatusObj.imgW+';'+'height:'+orderStatusObj.imgH" :src="imgUrl+orderStatusObj.imgName"></image>
				<text>{{orderStatusObj.label}}</text>
			</view>
			<view v-if="orderDetail.status!==0">{{orderStatusObj.desc}}</view>
			<view v-else>请在<text style="padding-left: 0; font-size: 28rpx;">{{countdown}}</text>内完成支付</view>
		</view>
		
		<scroll-view class="scroll-Y" scroll-y >
			
			
			<view class="userInfo">
				<view class="c-info c-flex jc-between">
					<view class="p-1">
						<view>{{orderDetail.lpgUserAddress||'--'}}</view>
						<view style="margin-top: 20rpx;"> {{orderDetail.lpgUserName}}
							{{maskPhoneNumber(orderDetail.lpgUserPhone)}}</view>
					</view>

				</view>
			</view>
			<view class="p-list">
				<view class="p-l-item">
					<view class="title-con c-flex jc-between c-item-center">
						商品信息
						
					</view>
					<view class="p-content">
						<view class="p-c-item c-flex jc-between" v-for="(item,i) in orderDetail.items" :key="i">
							<view class="goodInfo c-flex c-item-center">
								<view class="goodImg c-flex c-item-center jc-center">
									<image :src="item.pic"></image>
								</view>
								<view class="standards">
									<view>{{item.name}}</view>

									<view>
										单价￥{{item.price}}
									</view>
									<view>数量：x{{item.saleCount}}</view>
								</view>
							</view>

							<view class="saleAmount">
								￥{{item.saleAmount}}
							</view>

						</view>
					</view>
					
					<view class="p-price  c-flex jc-between">
						<view>商品总金额</view>
						<view>￥{{orderDetail.totalAmount}}</view>
					</view>
					<view class="p-price  c-flex jc-between">
						<view>配送费</view>
						<view>￥{{orderDetail.freightAmount}}</view>
					</view>
					<view class="line"></view>
					<view class="p-price  c-flex jc-end">

						<view class="payAmount">
							{{orderDetail.status===0?'应付金额：':'实付金额：'}}
							
							<text>￥{{orderDetail.payAmount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="p-list" v-if="orderDetail.status ===4 || orderDetail.status ===2  || orderDetail.status ===3">
				<view class="p-l-item">
					<view class="title-con c-flex jc-between c-item-center">
						配送信息
						
					</view>
					<view class="line"></view>
					<view class="p-content">
						<view class="p-c-item c-flex jc-between"  v-if="orderDetail.status ===4 || orderDetail.status ===3">
							<text>送达时间：</text> <text>{{orderDetail.arrivalTime || '--'}}</text>
						</view>
						<view class="p-c-item c-flex jc-between" >
							<text>配送骑手：</text> <text>{{orderDetail.staffName || '--'}}</text>
						</view>
						<view class="p-c-item c-flex jc-between" >
							<text>配送车辆：</text> <text>{{orderDetail.licensePlate || '--'}}</text>
						</view>
						
					</view>
				</view>
			</view>
			<view class="p-list">
				
				<view class="p-l-item">
					<view class="title-con c-flex jc-between c-item-center">
						订单信息
						
					</view>
					<view class="line"></view>
					<view class="p-content">
						
						<view class="p-c-item c-flex jc-between" >
							<text>订单编号：</text> <text>{{orderDetail.orderSn || '--'}}</text>
						</view>
						<view class="p-c-item c-flex jc-between" >
							<text>下单时间：</text> <text>{{orderDetail.createTime || '--'}}</text>
						</view>
						<view class="p-c-item c-flex jc-between" >
							<text>期望送达：</text> <text>{{orderDetail.appointTime || '--'}}</text>
						</view>
						
						<view class="p-c-item c-flex jc-between" >
							<text>支付方式：</text> <text>微信</text>
						</view>
						<view class="p-c-item c-flex jc-between" >
							<text>订单备注：</text> <text>{{orderDetail.note || '--'}}</text>
						</view>
						
					</view>
				</view>
			</view>
			<view class="p-list" v-if="orderDetail.status ===4">
				<view class="p-l-item">
					<view class="title-con c-flex jc-between c-item-center">
						安检信息
						
					</view>
					<view class="line"></view>
					<view class="p-content" @tap="checkRecord()">
						<view class="p-c-item c-flex jc-between">
							<text>安检时间：</text> <text>{{orderDetail.patrolTime || '--'}}</text>
						</view>
						<view class="p-c-item c-flex jc-between">
							<text>安检记录：</text> <text>点击查看安检记录 →</text>
						</view>
					</view>	
				</view>
			</view>
		</scroll-view>
		
		<view class="settlement_panle c-flex jc-between c-item-center"  v-if="orderDetail.status===0  || orderDetail.status===1 || orderDetail.status===2" >
			<view class="p-btn c-flex jc-end">
				<view v-if="orderDetail.status===0  || orderDetail.status===1" class="contactBtn" @tap.stop="btnHandler(orderDetail,'cancel')">取消订单</view>
				<view v-if="orderDetail.status===0" class="payBtn" @tap.stop="btnHandler(orderDetail,'pay')">立即支付
				</view>
				<view class="contactBtn"  v-if="orderDetail.status===2"  @tap.stop="btnHandler(orderDetail,'call')">致电骑手</view>
				<!-- <view v-if="item.status===5" class="contactBtn" @tap="btnHandler(item,'del')">删除订单</view> -->
			</view>
		</view>
		<tydPrompt ref='tydPrompt' :content="content" @confirmPrompt='confirmPrompt'></tydPrompt>
	</view>
</template>

<script>
	import tydPrompt from '@/components/tyd-prompt/tyd-prompt.vue';
	import {
		maskPhoneNumber,toast,debounce
	} from '@/utils/utils.js'
	import {
		mapStatus,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			tydPrompt
		},
		data() {
			return {
				content: '确定取消当前订单？',
				maskPhoneNumber: maskPhoneNumber,
				imgUrl: this.$API.IMG_URL + '/liquefied-mall/common/',
				orderDetail: null,
				sendTime: '',
				note: '',
				appointTime: '',
				cartIds: '',
				lpgUserId: null,
				orderItem:null,
				orderCountdown: 30,
				countdown:'',
				orderStatusObj:{
					label:'',
					desc:'',
					imgName:'',
					imgW:'',
					imgH:''
				},
				address:''
			};
		},
		onLoad(options) {

			this.orderDetail = JSON.parse(options.item)
			// this.lpgUserId = options.lpgUserId;
			// this.cartIds = options.cartIds;
			console.log(this.orderDetail)
			// const platform = uni.getSystemInfoSync().platform;
			//     if (platform === 'android') {
			//       // 获取系统信息
			//       const safeArea = uni.getSystemInfoSync().safeAreaInsets;
			//       // 设置底部安全距离
			//       this.safeBottom = safeArea.bottom;
			// 	  console.log(this.safeBottom)
			//     }
			//const addr=this.$store.getters.userSeleAddr;
			//console.log(addr)
			//if(addr){
				//this.address =`${addr.street}${addr.villageName}${addr.address}`;
				
			//}
			uni.setNavigationBarColor({
				backgroundColor: '#f9ead5',
				frontColor: '#000000'
			});
			if(this.orderDetail.status===0){
				this.startCountdown(this.orderDetail,'orderCancelTimer');
			}
			this.orderStatusLabel(this.orderDetail.status)
			
		},
		onShow() {
			
		},
		onUnload() {
			if(this.orderDetail.status===0){
				this.$timerManager.clearTimer("orderCancelTimer");
			}
			
		},
		methods: {
			checkRecord(){
				
				let picArr = this.orderDetail.attachments && this.orderDetail.attachments.split(',') || [];
				uni.navigateTo({
					url:'./room-check-detail?item='+JSON.stringify(this.orderDetail)+'&picArr='+JSON.stringify(picArr)+'&type=order'
				})
			},
			orderStatusLabel(status){
				switch (status) {
					case 0:
						this.orderStatusObj.label ='待支付'
						this.orderStatusObj.desc =''
						this.orderStatusObj.imgName ='dzf.png'
						this.orderStatusObj.imgW ='92rpx'
						this.orderStatusObj.imgH ='76rpx'
						break;
					case 1:
						this.orderStatusObj.label ='待接单'
						this.orderStatusObj.desc ='您的订单暂无配送员接单，请等待'
						this.orderStatusObj.imgName ='djd.png'
						this.orderStatusObj.imgW ='82rpx'
						this.orderStatusObj.imgH ='86rpx'
						break;
					case 2:
						this.orderStatusObj.label ='待送达'
						this.orderStatusObj.desc ='配送员正在加急配送中…'
						this.orderStatusObj.imgName ='dsd.png'
						this.orderStatusObj.imgW ='102rpx'
						this.orderStatusObj.imgH ='74rpx'
						break;
					case 3:
						this.orderStatusObj.label ='待安检'
						this.orderStatusObj.desc ='气瓶已送达，等待配送员安检'
						this.orderStatusObj.imgName ='daj.png'
						this.orderStatusObj.imgW ='98rpx'
						this.orderStatusObj.imgH ='76rpx'
						break;
					case 4:
						this.orderStatusObj.label ='已完成'
						this.orderStatusObj.desc =''
						this.orderStatusObj.imgName ='complete.png'
						this.orderStatusObj.imgW ='98rpx'
						this.orderStatusObj.imgH ='100rpx'
						break;
					case 5:
						this.orderStatusObj.label ='已取消'
						this.orderStatusObj.desc ='您的订单已取消，请知悉'
						this.orderStatusObj.imgName ='cancel.png'
						this.orderStatusObj.imgW ='82rpx'
						this.orderStatusObj.imgH ='86rpx'
						break;
					case 6:
						this.orderStatusObj.label ='退款中'
						this.orderStatusObj.desc ='您的订单正在退款中，请知悉'
						this.orderStatusObj.imgName ='cancel.png'
						this.orderStatusObj.imgW ='82rpx'
						this.orderStatusObj.imgH ='86rpx'
						break;
				}
			},
			startCountdown(item, orderCancelTimer) {
				// 当前时间
				let nowTime = new Date()
				// 获取创建订单30分钟后的时间,createTime:订单创建时间
				let endTime = new Date(item.createTime);
				endTime.setMinutes(endTime.getMinutes() + this.orderCountdown) // 结束时间，获取创建订单30分钟后的时间
				// 两个日期相差的时间戳，以毫秒为单位（1000ms = 1s）
				let distance = endTime - nowTime;
				// 结束时间大于现在的时间
				if (distance > 0) {
					this.$timerManager.setTimer(orderCancelTimer, 1000, () => {
						//console.log('计时器触发');
						if (distance > 0) {
							let minutes =
								Math.floor((((distance % (3600 * 24 * 1000)) / 1000) % 3600) / 60).toString()
								.padStart(2, "0");
							//获取秒数
							let seconds =
								Math.floor((((distance % (3600 * 24 * 1000)) / 1000) % 3600) % 60).toString()
								.padStart(2, "0");
							distance -= 1000;
							this.countdown = `${minutes}分${seconds}秒`;
							//console.log(this.countdown)
						}else{
							this.$timerManager.clearTimer(orderCancelTimer);
							this.countdown = '已过期';
							uni.navigateBack()
							
						}
			
					});
				}
			},
			btnHandler:debounce(function(item, btnStr){
				switch (btnStr) {
					case 'pay':
						this.goPay(item);
						break;
					case 'call':
						this.callPhone(item.staffPhone)
						break;
					case 'del':
						this.delOrder(item);
						break;
					case 'cancel':
						this.orderItem = item;
						
						this.$refs.tydPrompt.open();
					
						break;
				}
			},500), 
			goPay(item) {
				this.$API.payOrder({
					id: item.id
				}).then(res => {
					if (res.code === 0) {
				
						
						this.wxPay(res.prepayInfo,item)
						
				
					}
				}).catch(() => {
				
				});
			},
			wxPay(res,item) {
				let that = this;
				wx.requestPayment({
					provider: "wxpay",
					timeStamp: String(res.timeStamp),
					nonceStr: String(res.nonceStr),
					package: String(res.packageValue),
					signType: String(res.signType),
					paySign: String(res.paySign),
					appId: res.appId,
					success(res) {
						console.log(res)
						toast("支付成功");
						that.$timerManager.clearTimer('orderCancelTimer'+item.id);
						uni.navigateBack()
						
					},
					fail(res) {
						console.log(res)
						//that.initData();
						toast(res);
					}
				})
			},
			delOrder(item) {},
			cancelOrder() {
				this.$API.cancelOrder({
					id:  this.orderItem.id
				}).then(res => {
					if (res.code === 0) {
						uni.navigateBack();
						if(this.orderItem.status ===0){
							this.$timerManager.clearTimer('orderCancelTimer'+this.orderItem.id);
						}
						
				
					}
				}).catch(() => {
				
				});
			},
			confirmPrompt() {
				this.cancelOrder();
			},
			
			callPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(err) {
						console.log('拨打电话失败：', err);
					}
				});
			}
			
			
		}
	}
</script>
<style>
	.uni-button-color {
		color:#E86748 !important;
	}
	
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	//混合
	@mixin left-font ($size:30rpx) {
	   font-family: PingFang-SC, PingFang-SC;
	   font-weight: 500;
	   font-size: $size;
	   color: #333333;
	}
	.order-page {
		position: relative;
		background-image: linear-gradient(rgba(249, 195, 115, .3) 0%, #F9F9F9 100%);
		height: 100%;
		padding-bottom: 10px;
		/* 根据需要调整padding值 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 使用环境变量 */
		.scroll-Y {
			height: 1100rpx;
			//max-height: 1230rpx;
		}
		.orderStatus {
			padding-top: 32rpx;
			text {
				
				font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 36rpx;color: #000000;padding-left: 0;
			}
		}
		.wPayIcon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		.line {
			width: 658rpx;
			height: 0;
			border: 2rpx solid #F3F3F3;
			margin: 30rpx auto 0;
		}

		.remarks {
			margin: 20rpx auto;
			width: 621rpx;
			height: 126rpx;
			border-radius: 16rpx;
			border: 2rpx solid #DEDEDE;
			padding: 20rpx 22rpx;
		}

		.userInfo {
			margin: 0rpx 18rpx 0;
			position: relative;
			top: 40rpx;

			.c-info {
				background: #FFFFFF;
				border-radius: 18rpx;
				padding: 22rpx 28rpx 35rpx;
				margin-bottom: 20rpx;
				position: relative;

				.p-1 {
					width: 85%;
					// font-family: PingFang-SC, PingFang-SC;
					// font-weight: 500;
					// font-size: 30rpx;
					// color: #333333;
					@include left-font
				}

			}

		}

		.p-list {
			margin: 0rpx 18rpx 0;
			position: relative;
			top: 40rpx;

			.p-l-item {
				background: #FFFFFF;
				border-radius: 18rpx;
				padding: 15rpx 28rpx 15rpx;
				margin-bottom: 20rpx;
				position: relative;

				.title-con {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					padding-top: 18rpx;
				}

				.p-content {
					margin: 25rpx 0 0;
					.saleAmount{
						margin-top: 10rpx;
					}
					.p-c-item {
						margin: 24rpx 0;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						.seleTime {
							.seleTimeImg {
								width: 14px;
								height: 14px;
							}
							text {
								font-family: PingFang-SC, PingFang-SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #6A6969;
								
							}
						}
						.goodInfo {
							width: 80%;
							.goodImg {
								width: 98rpx;
								height: 94rpx;
								background: #F5F5F5;
								border-radius: 14rpx;
								image {
									width: 100%;
									height: 100%;
								}
							}
							.standards {
								margin-left: 18rpx;
								view{
									font-family: PingFang-SC, PingFang-SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #333333;
									margin-top: 10rpx;
								}
								view:nth-child(1) {
									
									font-weight: 500;
									font-size: 28rpx;
									
								}
								
							}
						}
						text {
							// font-family: PingFang-SC, PingFang-SC;
							// font-weight: 500;
							// font-size: 28rpx;
							// color: #333333;
							@include left-font(28rpx)
						}
					}
				}
				.p-price {
					margin: 24rpx 0;
					view {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}
					view:nth-child(2) {
						font-weight: 600;
					}
					.payAmount {
						// font-family: PingFang-SC, PingFang-SC;
						// font-weight: 400;
						// font-size: 28rpx;
						// color: #000000;

						text {
							font-weight: 600;
							font-size: 36rpx;

						}
					}
				}
			}
		}


		.settlement_panle {
			width: 100%;height: 170rpx;background: #FFFFFF;position: fixed;bottom: 0;

			.p-btn {
				width: 97%;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				text-align: center;
				gap: 26rpx;
			
				.contactBtn {
					width: 166rpx;
					height: 58rpx;
					border-radius: 29rpx;
					border: 2rpx solid #D8D8D8;
					line-height: 58rpx;
					color: #3E3E3E;
				}
			
				.payBtn {
					width: 216rpx;
					height: 58rpx;
					background: linear-gradient(180deg, #F18858 0%, #E86547 100%);
					border-radius: 29rpx;
					color: #FFFFFF;
					line-height: 58rpx;
				}
			
				.sureBtn {
					border: 2rpx solid transparent;
					line-height: 80rpx;
					width: 316rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: linear-gradient(180deg, #F18858 0%, #E86547 100%);
					border-radius: 16rpx;
					color: #FFFFFF;
				}
			
				
			}
		}

	}
</style>